<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东首页示例</title>
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", sans-serif;
            color: #333;
            background-color: #fff;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        ul,
        li {
            list-style: none;
        }

        /* 顶部导航栏 */
        .top-nav {
            background-color: #e3e4e5;
            font-size: 12px;
            line-height: 30px;
            color: #999;
        }

        .top-nav .container {
            display: flex;
            justify-content: space-between;
            width: 1200px;
            margin: 0 auto;
        }

        .top-nav .left-nav li,
        .top-nav .right-nav li {
            display: inline-block;
            margin-right: 10px;
        }

        .top-nav .right-nav li a {
            color: #999;
        }

        /* 头部区域 */
        .header {
            background-color: #f40;
        }

        .header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 1200px;
            margin: 0 auto;
            padding: 10px 0;
        }

        .header .logo {
            width: 100px;
        }

        .header .search-box {
            display: flex;
            align-items: center;
        }

        .header .search-input {
            width: 500px;
            height: 36px;
            padding: 0 10px;
            border: none;
            outline: none;
        }

        .header .search-btn {
            width: 80px;
            height: 36px;
            background-color: #f40;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .header .nav-list {
            display: flex;
            color: #fff;
            font-size: 14px;
        }

        .header .nav-list li {
            margin-left: 20px;
        }

        /* 广告横幅区域 */
        .banner {
            background-color: #ffd100;
            color: #c81623;
            text-align: center;
            padding: 10px 0;
            font-size: 14px;
        }

        /* 主体内容区域 */
        .main {
            width: 1200px;
            margin: 10px auto;
            display: flex;
        }

        .main .sidebar {
            width: 200px;
            background-color: #f9f9f9;
            padding: 10px;
        }

        .main .sidebar .sidebar-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .main .sidebar .sidebar-list li {
            line-height: 24px;
        }

        .main .content {
            flex: 1;
            margin-left: 10px;
        }

        .main .content .section {
            margin-bottom: 20px;
        }

        .main .content .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .main .content .goods-list {
            display: flex;
            flex-wrap: wrap;
        }

        .main .content .goods-item {
            width: 200px;
            margin-right: 10px;
            margin-bottom: 10px;
            text-align: center;
            border: 1px solid #eee;
            padding: 10px;
            transition: box-shadow 0.3s ease;
        }

        .main .content .goods-item:hover {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .main .content .goods-item img {
            width: 100%;
            margin-bottom: 10px;
        }

        .main .content .goods-item .price {
            color: #f40;
            font-weight: bold;
        }

        /* 底部区域 */
        .footer {
            background-color: #f4f4f4;
            text-align: center;
            padding: 20px 0;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>

<body>
<!-- 顶部导航栏 -->
<div class="top-nav">
    <div class="container">
        <ul class="left-nav">
            <li>中国大陆 - 陕西</li>
        </ul>
        <ul class="right-nav">
            <li><a href="#">购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">我的京东</a></li>
            <li><a href="#">企业采购</a></li>
            <li><a href="#">商家服务</a></li>
            <li><a href="#">网站导航</a></li>
            <li><a href="#">手机京东</a></li>
            <li><a href="#">网站无障碍</a></li>
        </ul>
    </div>
</div>

<!-- 头部 -->
<div class="header">
    <div class="container">
        <a href="#" class="logo"><img src="https://img11.360buyimg.com/imagetools/jfs/t1/208733/36/25473/103377/64700582F92999828/8c9c899999999999.png"
                                      alt="京东logo"></a>
        <div class="search-box">
            <input type="text" placeholder="外卖百亿补贴" class="search-input">
            <button class="search-btn">搜索</button>
        </div>
        <ul class="nav-list">
            <li><a href="#">家电家居超级焕新日</a></li>
            <li><a href="#">服饰美妆下单立享85折</a></li>
            <li><a href="#">茅台预约1499元</a></li>
            <li><a href="#">哪吒2周边</a></li>
            <li><a href="#">多功能沙发床</a></li>
            <li><a href="#">空气炸锅</a></li>
            <li><a href="#">佛雷他定</a></li>
        </ul>
    </div>
</div>

<!-- 广告横幅 -->
<div class="banner">
    <p>618周年庆 智家生活日 领60元补贴</p>
</div>

<!-- 主体内容 -->
<div class="main">
    <!-- 左侧侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-title">分类导航</div>
        <ul class="sidebar-list">
            <li><a href="#">家用电器</a></li>
            <li><a href="#">手机/运营商/数码</a></li>
            <li><a href="#">电脑/办公/文具用品</a></li>
            <li><a href="#">家居/家具/家装/厨具</a></li>
            <li><a href="#">男装/女装/童装/内衣</a></li>
            <li><a href="#">美妆/个护清洁/宠物</a></li>
            <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
            <li><a href="#">男鞋/运动/户外</a></li>
            <li><a href="#">房产/汽车/汽车用品</a></li>
            <li><a href="#">母婴/玩具乐器</a></li>
            <li><a href="#">食品/酒类/生鲜/特产</a></li>
        </ul>
    </div>
    <!-- 右侧内容区 -->
    <div class="content">
        <div class="section">
            <div class="section-title">京东助力企业 出口转内销</div>
            <div class="goods-list">
                <div class="goods-item">
                    <img src="https://img14.360buyimg.com/n1/jfs/t1/197733/31/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品1">
                    <p class="price">¥7049</p>
                    <p>补贴价</p>
                </div>
                <div class="goods-item">
                    <img src="https://img10.360buyimg.com/n1/jfs/t1/198733/32/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品2">
                    <p class="price">¥39.9</p>
                    <p>补贴价</p>
                </div>
                <div class="goods-item">
                    <img src="https://img12.360buyimg.com/n1/jfs/t1/200733/33/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品3">
                    <p class="price">¥55.68</p>
                    <p>补贴价</p>
                </div>
                <!-- 可继续添加商品项 -->
            </div>
        </div>
        <div class="section">
            <div class="section-title">企业会员</div>
            <div class="goods-list">
                <div class="goods-item">
                    <img src="https://img13.360buyimg.com/n1/jfs/t1/202733/34/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品4">
                    <p class="price">¥6999</p>
                    <p>新客专享权益</p>
                </div>
                <!-- 可继续添加商品项 -->
            </div>
        </div>
        <div class="section">
            <div class="section-title">京东直播</div>
            <div class="goods-list">
                <div class="goods-item">
                    <img src="https://img15.360buyimg.com/n1/jfs/t1/204733/35/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品5">
                    <p>总裁价到</p>
                </div>
                <!-- 可继续添加商品项 -->
            </div>
        </div>
        <div class="section">
            <div class="section-title">京东秒杀</div>
            <div class="goods-list">
                <div class="goods-item">
                    <img src="https://img11.360buyimg.com/n1/jfs/t1/206733/36/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品6">
                    <p class="price">¥36.6</p>
                </div>
                <div class="goods-item">
                    <img src="https://img16.360buyimg.com/n1/jfs/t1/207733/37/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品7">
                    <p class="price">¥35.89</p>
                </div>
                <!-- 可继续添加商品项 -->
            </div>
        </div>
        <div class="section">
            <div class="section-title">9.9包邮</div>
            <div class="goods-list">
                <div class="goods-item">
                    <img src="https://img17.360buyimg.com/n1/jfs/t1/209733/38/25573/103377/64700582F92999828/8c9c899999999999.png"
                         alt="商品8">
                    <p class="price">¥13.7</p>
                </div>
                <!-- 可继续添加商品项 -->
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="footer">
    <p>天天领好礼 京豆 充值中心 国家补贴 政府消费券 酒店 云建站 爱回收</p>
    <p>© 2025 京东 版权所有</p>
</div>
</body>

</html>